/**
* Created by ren on 2016/12/30.
*/
<template>
  <div class='cartList page-wrap'>
    <Nav></Nav>
    <div class="container">
      <div class="cartlist page" v-if="cartData.length>0">
        <div class="tit">
          <div style="margin-right: 143px"><img
            :src="allChecked?require('../assets/select1.png'):require('../assets/select2.png')" @click="allCheck"
            style="margin-right: 27px;margin-top: -5px;"><span>全选</span>
          </div>
          <div style="margin-right: 142px">商品信息</div>
          <div style="margin-right: 142px">数量</div>
          <div style="margin-right: 142px">金额(元)</div>
          <div>操作</div>
        </div>
        <div class="con">
          <div class="item" v-for="(item,index) in cartData">
            <div style="width: 156px;margin-right: 40px">
              <img :src="cartData[index].checked?require('../assets/select1.png'):require('../assets/select2.png')"
                   @click="check(index)" style="margin-right: 15px;margin-top: -5px;">
              <img v-lazy="loadImg(item.goldshoppingVo.imgUrl)"
                   style="width: 112px;height: 104px;border: 1px solid #ccc">
            </div>
            <div style="width: 177px;margin-right: 20px;">
              <div style="font-size: 20px;color: #333;margin-bottom: 3px;" class="name">
                {{item.goldshoppingVo.shopName}}
              </div>
              <div style="font-size: 16px;color: #999999;margin-bottom: 8px;">
                规格：{{(item.shopstandardVo.weight/1000).toFixed(2)}}g
              </div>
            </div>
            <div class="num">
              <div class="sub" @click="sub(index)">-</div>
              <input type="text" :value="item.number" readonly=true>
              <div class="add" @click="add(index)">+</div>
            </div>
            <div style="width: 170px;margin-right: 73px;text-align: center;padding-top: 15px;">
              <div style="color: #e60012;margin-bottom: 10px">¥<span style="font-size:18px">{{(goldPrice*item.number*item.shopstandardVo.weight/100000).toFixed(2).split(".")[0]}}</span>.{{(goldPrice*item.number*item.shopstandardVo.weight/100000).toFixed(2).split(".")[1]}}
              </div>
              <div>手工费：{{(item.goldshoppingVo.handPay/100).toFixed(2)}}元/g</div>
            </div>
            <div style="margin-top: 33px;color: #e78200;cursor: pointer" @click="deleteShopCars(item.id)">删除</div>
          </div>
        </div>
        <div id="line"></div>
        <div class="end">
          <div>
            <div>已选商品<span>{{num}}</span>件</div>
            <div>手工总费<span>{{handPayTotal.split('.')[0]}}.<span>{{handPayTotal.split('.')[1]}}</span></span>元</div>
            <div>合计(不含运费)<span>{{totalPrice.split('.')[0]}}<span>.{{totalPrice.split('.')[1]}}</span></span>元
            </div>
          </div>
          <button class="btn" @click="toOrderAccount">结算</button>
        </div>
      </div>
      <div v-else
           style="text-align: center;padding-top: 204px;background: white;padding-bottom: 200px;margin-top: 20px;margin-bottom: 20px;">
        <img src="../assets/null.png" style="margin-bottom: 40px">
        <div>购物车暂时没商品哦，快去首页看看吧~</div>
      </div>
    </div>
    <Notify :parentThis='this'></Notify>
  </div>
</template>

<script>
  import Nav from './Nav'

  import API from '../api'
  import Notify from '../components/Notify'
  export default {
    name: 'cartList',
    components: {
      Nav,
      Notify
    },
    data: function () {
      return {
        cartData: '',
        allChecked: false,
        notifyStatus: 2,
        num: 0,
        goldshoppingVo: '0.00',
        totalPrice: '0.00',
        goldPrice: '',
        handPayTotal: '0.00',
        isScroll: false,
        style: ''
      }
    },
    methods: {
      loadImg: function (path) {
        return API.path + path
      },
      cartList: function () {
        this.$http.post(API.ShopCarList, {
          userId: this.$cookie.get('id')
        }).then((ret) => {
          const result = ret.body
          if (result.code === 1) {
            for (var i in result.object.content) {
              result.object.content[i].checked = false
            }
            this.cartData = result.object.content
          } else {
            this.notifyStatus = '0|' + result.message
          }
        }, (err) => {
          console.log(err)
        })
      },
      toOrderAccount: function () {
        var shopVo = []
        var spStandardId = ''
        for (var i in this.cartData) {
          const item = this.cartData[i]
          if (item.checked) {
            shopVo.push({
              shopId: item.goldshoppingVo.id,
              imgUrl: item.goldshoppingVo.imgUrl,
              shopName: item.goldshoppingVo.shopName,
              standardId: item.shopstandardVo.id,
              weight: item.shopstandardVo.weight,
              handPay: item.goldshoppingVo.handPay,
              price: (this.goldPrice + item.goldshoppingVo.handPay) * item.number * item.shopstandardVo.weight,
              number: item.number,
              carIds: item.id
            })
            spStandardId += ',' + item.shopstandardVo.id + '-' + item.number
          }
        }
        if (shopVo.length === 0) {
          this.notifyStatus = '0|至少选择一种商品'
        } else {
          this.$cookie.set('spCart_shopVo', JSON.stringify(shopVo))
          this.$cookie.set('sp_standardId', spStandardId.substring(1))
          this.$router.push({'name': 'orderAccount'})
        }
      },
      sub: function (index) {
        if (this.cartData[index].number > 1) {
          this.cartData[index].number--
          this.updateShopCars(this.cartData[index].id, this.cartData[index].number)
        }
        this.isAllCheck()
      },
      add: function (index) {
        this.cartData[index].number++
        this.updateShopCars(this.cartData[index].id, this.cartData[index].number)
        this.isAllCheck()
      },
      allCheck: function () {
        this.allChecked = !this.allChecked
        for (var i in this.cartData) {
          this.cartData[i].checked = this.allChecked
        }
        this.isAllCheck()
      },
      check: function (index) {
        this.cartData[index].checked = !this.cartData[index].checked
        this.isAllCheck()
      },
      updateShopCars: function (id, number) {
        this.$http.post(API.updateShopCars, {
          userId: this.$cookie.get('id'),
          id: id,
          number: number
        }).then((ret) => {
          const result = ret.body
          if (result.code === 1) {
          } else {
            this.notifyStatus = '0|' + result.message
          }
        }, (err) => {
          console.log(err)
        })
      },
      findGoldPrice: function () {
        this.$http.post(API.findGoldPrice, {
          userId: this.$cookie.get('id')
        }).then((ret) => {
          const result = ret.body
          if (result.code === 1) {
            this.goldPrice = result.object
          } else {
            this.notifyStatus = '0|' + result.message
          }
        }, (err) => {
          console.log(err)
        })
      },
      isAllCheck: function () {
        this.num = 0
        this.handPayTotal = 0
        this.totalPrice = 0.00
        var flag = true
        for (var i in this.cartData) {
          if (!this.cartData[i].checked) {
            flag = false
          } else {
            this.num += this.cartData[i].number
            this.handPayTotal += this.cartData[i].goldshoppingVo.handPay * this.cartData[i].number * this.cartData[i].shopstandardVo.weight / 1000
            this.totalPrice += parseFloat((this.goldPrice + this.cartData[i].goldshoppingVo.handPay) * this.cartData[i].number * this.cartData[i].shopstandardVo.weight / 1000)
          }
        }
        this.handPayTotal = (this.handPayTotal / 100).toFixed(2)
        this.totalPrice = (this.totalPrice / 100).toFixed(2)
        this.allChecked = flag
      },
      deleteShopCars: function (id) {
        this.$http.post(API.deleteShopCars, {
          userId: this.$cookie.get('id'),
          id: id
        }).then((ret) => {
          const result = ret.body
          if (result.code === 1) {
            this.cartList()
            this.allChecked = false
            for (var i in this.cartData) {
              this.cartData[i].checked = this.allChecked
            }
            this.isAllCheck()
          } else {
            this.notifyStatus = '0|' + result.message
          }
        }, (err) => {
          console.log(err)
        })
      },
      handleScroll: function () {
        var self = document.getElementById('line')
        var bh = document.documentElement.clientHeight
        if (self) {
          if (window.scrollY + bh - 138 - 104 < self.offsetTop) {
            this.style = 'position: fixed;bottom: 0;background: white;width: 990px;border-top-width: 1px'
            window.jQuery('.end').css({
              position: 'fixed',
              bottom: 0,
              background: 'white',
              width: '990px',
              'border-top-width': '1px'
            })
          } else {
            window.jQuery('.end').removeAttr('style')
          }
        }
      }
    },
    updated: function () {
      this.handleScroll()
    },
    mounted: function () {
      this.findGoldPrice()
      this.cartList()
      window.addEventListener('scroll', this.handleScroll)
    }
  }

</script>
